import React, { PureComponent } from 'react';
import { Form, Modal, Input, Select, Cascader,message } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
const FormItem = Form.Item;
const Option = Select.Option;
@Form.create()
@connect(({ assessment, loading }) => ({
    companyList: assessment.companyList,
    AssessmentNodeList: assessment.AssessmentNodeList,
    pipingTemplateList: assessment.pipingTemplateList,
    roadTemplateList: assessment.roadTemplateList,
    loadingPipingTemplate: loading.effects['assessment/fetchGetTemplate']
}))

class AssessAddForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
        this.dispatch = this.props.dispatch;
    }
    submitAddValues = () => {

        this.props.form.validateFields((err, values) => {
            if (!err) {
              
                let requestData={};
                requestData.yf   = Number(values.queryQuarter);
                requestData.nf   = Number(values.queryYear);
                requestData.khlx = Number(values.khlx);
                requestData.zbkf = Number(values.zbkf);
                requestData.khbm = values.khbm;
                requestData.bz   = values.bz;
                
                if(values.khzbCascader && typeof values.khzbCascader == 'object')
                {
                    values.khzb = values.khzbCascader[1];
                }
                
                const hide = message.loading('正在新增...', 0);
                this.dispatch({
                    type: 'assessment/fetchAddOneCheck',
                    payload: {
                    cm: requestData,
                    khzbID:values.khzb
                    },
                    callback: response => {
                      hide();
                      if (response.status) {
                        message.success('添加成功');
                        this.setState({ visible: false });
                        this.props.fetchAssessList();
                        this.props.resetData();
                      } else {
                        message.error('添加失败');
                        console.log(response.ErrorMessage);
                      }
                    },
                  });

            }

        });
     }

    choseAssessItem = () => {

        const form = this.props.form;

        let result = null;

        if (form.getFieldValue("khlx") == "1") {
            result = 'NoCascader';
        }
        else if (form.getFieldValue("khlx") == "2") {

            result = 'Cascader';

        }
        return result;

    }
    returnCascaderData = () => {

        let result = [];
        const roadTemplateList = this.props.roadTemplateList;
        
        if (roadTemplateList.data2.length) {
            for (let item of roadTemplateList.data1) {

                let children = [];

                for (let innerItem of roadTemplateList.data2) {

                    if (item.flzbbm == innerItem.flzbbm) children.push({ value: innerItem.id, label: innerItem.khzb+ "*"+innerItem.zbkf });

                }
                result.push({ value: item.flzbbm, label: item.flkhzb, children: children });
            }
        }
        return result; 


    }
    onChange=(key,propsValue)=>{
        const {form } = this.props;
        form.setFieldsValue({zbkf:propsValue.props.children.split('*')[1]});
     }
     onCascaderChange=(content,selected)=>{
        const {form } = this.props;
        form.setFieldsValue({zbkf:selected[1].label.split('*')[1]});
     }
    componentDidMount() {
        this.props.OnRef(this, { type: 'AddForm' });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 4 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 18 },
                sm: { span: 18 },
            },
        };
        const { companyList, AssessmentNodeList, pipingTemplateList, roadTemplateList, loadingPipingTemplate } = this.props;
        const currentYear = new Date().getFullYear();
        const currentQuater = moment().month()+1;
        const years = [
            { nodeName: currentYear, key: currentYear },
            // { nodeName: currentYear - 1, key: currentYear - 1 },
            // { nodeName: currentYear - 2, key: currentYear - 2 },
            // { nodeName: currentYear - 3, key: currentYear - 3 },
        ];
        const quarters = [
            { nodeName: '1月', key: '1' },
            { nodeName: '2月', key: '2' },
            { nodeName: '3月', key: '3' },
            { nodeName: '4月', key: '4' },
            { nodeName: '5月', key: '5' },
            { nodeName: '6月', key: '6' },
            { nodeName: '7月', key: '7' },
            { nodeName: '8月', key: '8' },
            { nodeName: '9月', key: '9' },
            { nodeName: '10月', key: '10' },
            { nodeName: '11月', key: '11' },
            { nodeName: '12月', key: '12' },
        ];
        return (
            <Modal
                title="新增"
                destroyOnClose
                visible={this.state.visible} onOk={() => {
                    this.submitAddValues();
                }}
                onCancel={() => {
                    this.setState({ visible: false });
                }}
            >
                <Form {...formItemLayout}>
                    <FormItem label="养护单位">
                        {getFieldDecorator('khbm', {
                            initialValue: null, rules: [
                                {
                                    required: true,
                                    message: '请选择养护单位',
                                },
                            ]
                        })(
                            <Select >
                                {companyList && companyList.map(item =>
                                        <Option key={item.Id} value={item.Id}>
                                            {item.Name}
                                        </Option>
                                    )}
                            </Select>
                        )}
                    </FormItem>

                    <FormItem label="年份">
                        {getFieldDecorator('queryYear', {
                            initialValue: currentYear, rules: [
                                {
                                    required: true,
                                    message: '请选择年份',
                                },
                            ]
                        })(
                            <Select  >
                                {years.length > 0
                                    ? years.map(item =>
                                        <Option key={item.key} value={item.key}>
                                            {item.nodeName}
                                        </Option>
                                    )
                                    : null}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="月份">
                        {getFieldDecorator('queryQuarter', {
                            initialValue: currentQuater+ "", rules: [
                                {
                                    required: true,
                                    message: '请选择月份',
                                },
                            ]
                        })(
                            <Select >
                                {quarters.length > 0
                                    ? quarters.map(item =>
                                        <Option key={item.key} value={item.key}>
                                            {item.nodeName}
                                        </Option>
                                    )
                                    : null}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="考核分类">
                        {getFieldDecorator('khlx', {
                            initialValue: null, rules: [
                                {
                                    required: true,
                                    message: '请选择考核分类',
                                },
                            ]
                        })(
                            <Select>
                                {AssessmentNodeList.length > 0
                                    ? AssessmentNodeList.map(item =>
                                        <Option key={item.key} value={item.key}>
                                            {item.nodeName}
                                        </Option>
                                    )
                                    : null}
                            </Select>
                        )}
                    </FormItem>
                    {this.choseAssessItem() == "Cascader" ?<>
                        <FormItem label="考核指标">
                            {getFieldDecorator('khzbCascader', {
                                initialValue: null, rules: [
                                    {
                                        required: true,
                                        message: '请选择考核指标',
                                    },
                                ]
                            })(
                                <Cascader options={this.returnCascaderData()} placeholder={"请选择考核指标"}  onChange={this.onCascaderChange}/>
                            )}
                        </FormItem>
                         <FormItem label="指标扣分" >
                         {getFieldDecorator('zbkf', {
                             initialValue: null,rules: [
                                {
                                    type: 'number',
                                    message: '请输入数字',
                                    transform:(value)=> {return Number(value)}
                                },]
                         })(<Input placeholder="不填写，扣分值为默认扣分值"  addonAfter="分"/>)}
                     </FormItem></> : null}
                    {this.choseAssessItem() == "NoCascader" && <><FormItem label="考核指标">
                        {getFieldDecorator('khzb', {
                            initialValue: null, rules: [
                                {
                                    required: true,
                                    message: '请选择考核指标',
                                   
                                },
                            ]
                        })(
                            <Select loading={loadingPipingTemplate} onChange={this.onChange}>
                                {pipingTemplateList.data2.length > 0
                                    ? pipingTemplateList.data2.map(item =>
                                        <Option key={item.id } value={item.id}>
                                            {item.khzb + "*"+item.zbkf}
                                        </Option>
                                    )
                                    : null}
                            </Select>
                        )}
                    </FormItem> <FormItem label="指标扣分" >
                         {getFieldDecorator('zbkf', {
                             initialValue: null, rules: [
                                {
                                    type: 'number',
                                    message: '请输入数字',
                                    transform:(value)=> {return Number(value)}
                                },
                            ]
                         })(<Input placeholder="不填写，扣分值为默认扣分值" addonAfter="分"/>)}
                     </FormItem></> 
                    }
                    <FormItem label="备注">
                        {getFieldDecorator('bz', { initialValue: null })(
                            <Input.TextArea row={4} placeholder={"备注"} />
                        )}
                    </FormItem>
                </Form>
            </Modal>);
    }
}

export default AssessAddForm;